<template>
  <div class="echart-series-label">
    <FormItem
      :form="form"
      :option="fixPath('echart.series._labels.[x].show')"
      :label="$demoi18n('echart.label.showDataLabels')"
      type="switch"
      :label-width="labelWidth"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.series._labels.[x].position')"
      :label="$demoi18n('echart.label.labelPosition')"
      type="select"
      :options="seriesLabelPositions"
      :labelWidth="labelWidth"
    />
    <FormItem
      v-if="unitVisible"
      :form="form"
      :option="fixPath('echart.series._labels.[x]._unit')"
      :label="$demoi18n('word.unit')"
      type="input"
      :label-width="labelWidth"
    />
    <FormItem
      v-if="formatVisible"
      :form="form"
      :option="fixPath('echart.series._labels.[x]._format')"
      :label="$demoi18n('word.labelFormat')"
      type="input"
      :helptip="$demoi18n('panel.labelFormat.tip')"
      :label-width="labelWidth"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.series._labels.[x].offset')"
      :label="$demoi18n('echart.label.labelOffset')"
      type="number_array"
      :label-width="labelWidth"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.series._labels.[x].rotate')"
      :label="$demoi18n('echart.label.textDirection')"
      type="number"
      :min="-90"
      :max="90"
      :label-width="labelWidth"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.series._labels.[x].color')"
      :label="$demoi18n('panel.label.fontColor')"
      type="color"
      :label-width="labelWidth"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.series._labels.[x].fontSize')"
      :label="$demoi18n('word.fontSize')"
      type="number"
      :label-width="labelWidth"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.series._labels.[x].fontWeight')"
      :label="$demoi18n('echart.label.bold')"
      type="select"
      :options="fontWeightOptions"
      :label-width="labelWidth"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.series._labels.[x].fontFamily')"
      :label="$demoi18n('echart.label.fonts')"
      type="select"
      :options="fontFamilyOptions"
      :label-width="labelWidth"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import {
  seriesLabelPositions,
  fontWeightOptions,
  fontFamilyOptions,
} from '@/components/common/echart/form-item-options.js';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';

export default {
  components: { FormItem },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      seriesLabelPositions,
      fontWeightOptions,
      fontFamilyOptions,
      labelWidth: '100px',
    };
  },
  computed: {
    unitVisible() {
      const excludes = ['relationship-diagram'];
      return !excludes.includes(this.componentName);
    },
    formatVisible() {
      const arr = ['uniaxial-bar'];
      return arr.includes(this.componentName);
    },
  },
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped></style>
